<template>
    <div class="dashboard-container">
        <div class="dashboard-header">
            <div class="time-display">{{ currentDateTime }}</div>
            <div class="title">证券信息数据展示</div>
        </div>

        <div class="dashboard-content">
            <el-row :gutter="20" style="height: 100%; width: 100%">
                <!-- 左侧四个模块 -->
                <el-col :span="18" class="left-container">
                    <el-row :gutter="20" class="top-row">
                        <!-- 中国指数 (左上) -->
                        <el-col :span="12">
                            <china-indices class="module-card" />
                        </el-col>

                        <!-- 新股上市日历 (右上) -->
                        <el-col :span="12">
                            <ipo-calendar class="module-card" />
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" class="bottom-row">
                        <!-- 沪深港通资金流 (左下) -->
                        <el-col :span="15">
                            <hk-stock-connect class="module-card" />
                        </el-col>

                        <!-- 板块资金流今日涨跌幅 (右下) -->
                        <el-col :span="9">
                            <sector-fund-flow class="module-card" />
                        </el-col>
                    </el-row>
                </el-col>

                <!-- 右侧证券快讯 -->
                <el-col :span="6" class="right-container">
                    <securities-news class="news-module" />
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import { ref, onMounted, onBeforeUnmount, provide } from 'vue';
    import ChinaIndices from '@/components/ChinaIndices.vue';
    import IpoCalendar from '@/components/IpoCalendar.vue';
    import SecuritiesNews from '@/components/SecuritiesNews.vue';
    import HkStockConnect from '@/components/HkStockConnect.vue';
    import SectorFundFlow from '@/components/SectorFundFlow.vue';

    export default {
        name: 'Dashboard',
        components: {
            ChinaIndices,
            IpoCalendar,
            SecuritiesNews,
            HkStockConnect,
            SectorFundFlow,
        },
        setup() {
            const currentDateTime = ref('');
            const shouldPauseUpdates = ref(false);
            let timer = null;
            let mousePauseTimer = null;

            // 更新时间显示函数
            const updateDateTime = () => {
                const now = new Date();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0');
                currentDateTime.value = `${month}-${day} ${hours}:${minutes}:${seconds}`;
            };

            // 处理鼠标移入事件
            const handleMouseEnter = () => {
                shouldPauseUpdates.value = true;
                console.log('鼠标进入，暂停数据更新');
            };

            // 处理鼠标移出事件
            const handleMouseLeave = () => {
                shouldPauseUpdates.value = false;
                console.log('鼠标离开，恢复数据更新');
            };

            // 添加标准防抖函数
            const debounce = (fn, delay) => {
                let timer = null;
                return function (...args) {
                    if (timer) clearTimeout(timer);
                    timer = setTimeout(() => {
                        fn.apply(this, args);
                    }, delay);
                };
            };

            // 应用防抖的鼠标移动处理函数
            const handleMouseMove = debounce(() => {
                shouldPauseUpdates.value = true;

                // 清除之前的定时器
                if (mousePauseTimer) {
                    clearTimeout(mousePauseTimer);
                }

                // 设置新定时器：鼠标停止移动10秒后恢复更新
                mousePauseTimer = setTimeout(() => {
                    shouldPauseUpdates.value = false;
                    console.log('鼠标静止10秒，恢复数据更新');
                }, 10000);
            }, 100); // 设置100ms的防抖延迟

            // 屏幕大小检测函数保持不变...
            const detectScreenSize = () => {
                const width = window.innerWidth;
                const height = window.innerHeight;

                console.log(`当前屏幕分辨率: ${width} x ${height}`);

                // 获取标题元素的计算样式
                const titleElement = document.querySelector('.title');
                if (titleElement) {
                    const computedStyle = window.getComputedStyle(titleElement);
                    console.log(`当前标题字体大小: ${computedStyle.fontSize}`);
                }

                // 判断当前应用的媒体查询
                if (height < 800) {
                    console.log('当前使用的媒体查询: 小屏幕 (max-height: 800px)');
                } else if (height >= 1800 && width >= 3000) {
                    console.log(
                        '当前使用的媒体查询: 超大屏幕/4K (min-height: 1800px, min-width: 3000px)'
                    );
                } else if (height >= 1200) {
                    console.log(
                        '当前使用的媒体查询: 大屏幕/1440p (min-height: 1200px)'
                    );
                } else if (height >= 1000) {
                    console.log(
                        '当前使用的媒体查询: 中等大屏幕 (min-height: 1000px)'
                    );
                } else {
                    console.log('当前使用的媒体查询: 标准屏幕 (无特殊媒体查询)');
                }
            };

            onMounted(() => {
                updateDateTime();
                timer = setInterval(updateDateTime, 1000);

                // 初始检测屏幕大小
                detectScreenSize();

                // 监听窗口大小变化
                window.addEventListener('resize', detectScreenSize);

                // 添加鼠标事件监听
                const dashboardElement = document.querySelector(
                    '.dashboard-container'
                );
                if (dashboardElement) {
                    dashboardElement.addEventListener(
                        'mouseenter',
                        handleMouseEnter
                    );
                    dashboardElement.addEventListener(
                        'mouseleave',
                        handleMouseLeave
                    );
                    dashboardElement.addEventListener('mousemove', handleMouseMove);
                }
            });

            onBeforeUnmount(() => {
                if (timer) clearInterval(timer);
                if (mousePauseTimer) clearTimeout(mousePauseTimer);

                window.removeEventListener('resize', detectScreenSize);

                // 移除鼠标事件监听
                const dashboardElement = document.querySelector(
                    '.dashboard-container'
                );
                if (dashboardElement) {
                    dashboardElement.removeEventListener(
                        'mouseenter',
                        handleMouseEnter
                    );
                    dashboardElement.removeEventListener(
                        'mouseleave',
                        handleMouseLeave
                    );
                    dashboardElement.removeEventListener(
                        'mousemove',
                        handleMouseMove
                    );
                }
            });

            // 提供状态给子组件
            provide('shouldPauseUpdates', shouldPauseUpdates);

            return {
                currentDateTime,
                shouldPauseUpdates,
            };
        },
    };
</script>

<style scoped>
    .dashboard-container {
        padding: 10px 15px;
        background-color: #001440;
        height: 100vh; /* 使用视窗高度保证填满整个屏幕 */
        max-height: 100vh; /* 限制最大高度 */
        overflow: hidden; /* 防止出现滚动条 */
        color: #fff;
        display: flex;
        flex-direction: column;
        box-sizing: border-box; /* 确保padding不会增加总高度 */
    }

    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px; /* 减少顶部间距 */
        height: 40px; /* 固定头部高度 */
    }

    .dashboard-content {
        flex: 1;
        display: flex;
        height: calc(100vh - 60px); /* 减去头部高度 */
        overflow: hidden;
    }

    .time-display {
        font-size: 16px;
        font-weight: bold;
        color: #8cd6ff;
    }

    .title {
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        flex-grow: 1;

        /* 方案：对角线渐变方向 */
        background-image: linear-gradient(135deg, #4a9ff5, #e2e7f1, #1378dd);

        /* 方案：动态流动渐变效果 */
        background-size: 200% 100%;
        animation: gradientFlow 15s infinite linear;

        /* 背景裁剪到文本 */
        -webkit-background-clip: text;
        background-clip: text;

        /* 文本透明以显示背景 */
        color: transparent;
        -webkit-text-fill-color: transparent;

        /* 增强文本可读性和立体感 */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 20, 40, 0.1);
    }

    /* 添加渐变流动动画 */
    @keyframes gradientFlow {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    .left-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .top-row,
    .bottom-row {
        display: flex;
        flex: 1;
    }

    .top-row {
        margin-bottom: 15px;
    }

    .right-container {
        height: 100%;
    }

    .module-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* 防止内容溢出 */
    }

    .news-module {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* 防止内容溢出 */
    }

    /* 确保内部组件填满卡片空间 */
    :deep(.el-card__body) {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px; /* 确保内边距一致 */
    }

    /* 确保表格不会撑开容器 */
    :deep(.el-table) {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    /* 确保行不会被截断 */
    :deep(.el-table__body-wrapper) {
        overflow-y: auto;
    }

    /* 适应不同的屏幕尺寸 */
    @media (max-height: 800px) {
        .dashboard-header {
            margin-bottom: 8px;
            height: 35px;
        }

        .top-row {
            margin-bottom: 10px;
        }

        :deep(.el-table) {
            font-size: 12px;
        }

        .dashboard-container {
            padding: 8px 12px;
        }
    }

    /* 适应大屏幕 - 基本优化 */
    @media (min-height: 1000px) {
        .dashboard-header {
            margin-bottom: 15px;
            height: 50px;
        }

        .title {
            font-size: 35px;
        }

        .time-display {
            font-size: 18px;
        }

        .top-row {
            margin-bottom: 20px;
        }
    }

    /* 适应更大的屏幕 - 如1440p显示器 */
    @media (min-height: 1200px) {
        .dashboard-container {
            padding: 15px 20px;
        }

        .dashboard-header {
            margin-bottom: 20px;
            height: 60px;
        }

        .title {
            font-size: 40px;
        }

        .time-display {
            font-size: 20px;
        }

        :deep(.card-header h3) {
            font-size: 22px;
        }

        :deep(.el-table) {
            font-size: 16px;
        }

        :deep(.el-table__header th .cell) {
            font-size: 18px;
        }
    }

    /* 适应超大屏幕 - 如4K显示器 */
    @media (min-height: 1800px) and (min-width: 3000px) {
        .dashboard-container {
            padding: 25px 30px;
        }

        .dashboard-header {
            margin-bottom: 30px;
            height: 80px;
        }

        .title {
            font-size: 50px;
        }

        .time-display {
            font-size: 24px;
        }

        :deep(.card-header) {
            padding: 15px 20px;
        }

        :deep(.card-header h3) {
            font-size: 26px;
        }

        :deep(.el-table) {
            font-size: 18px;
        }

        :deep(.el-table__header th .cell) {
            font-size: 22px;
        }

        /* 增加图表容器高度 */
        :deep(.chart-container) {
            height: 350px !important;
        }

        /* 调整分页指示器大小 */
        :deep(.dot) {
            width: 12px;
            height: 12px;
            margin: 0 8px;
        }
    }
</style>